<template>
	<view class="container">
		<!-- 2.0.19支持autoBack，默认为false -->
		<up-navbar :fixed="false" bgColor="transparent" >
			<template #left>
				<view class="logo-box">
					<img src="/static/logo.png" alt="" class="logo">
					<span class="logotitle">捌加壹采购</span>
				</view>

			</template>
		</up-navbar>
		<view class="search-box">
			<navigator class="search" url="/pages/search/search">
				<up-search bgColor="#ffffff" height="56rpx" placeholder="搜索产品名称" :show-action="false"
					v-model="keyword"></up-search>
				<view class="searchBtn">
					搜索
				</view>
			</navigator>

			<up-icon name="bell" color="#ffffff" size="38"></up-icon>
		</view>
		<view class="swiper-box">
			<up-swiper :list="swpierList"  keyName="image" @change="e => current = e.current">
				<template #indicator>
					<view class="indicator">
						<view :class="index == current?'indicator__active':'indicator__dot'"
							v-for="(item, index) in swpierList" :key="index">
						</view>
					</view>
				</template>
			</up-swiper>
		</view>
		<view class="grid-box">
			<up-grid :border="false" col="5" >
				<up-grid-item v-for="(listItem,listIndex) in gridList" :key="listIndex" @click="goClass()">
					<img :src="listItem.icon" alt="" class="grid-img">
					<text class="grid-text">{{listItem.name}}</text>
				</up-grid-item>
			</up-grid>
		</view>
		<view class="hot-sell-box">
			<block v-for="(item,index) in areaList" :key="index">

				<img class="sell-item-1" :src="item.image" alt="" />
			</block>
		</view>
		<view class="product-box">
			<block v-for="(item,index) in productList" :key="index">
				<navigator class="item" :url="'/pages/productDetail/productDetail?goods='+item.id">
					<img class="product-img" :src="item.main_image" alt="">
					<view class="name">{{item.goods_name}}</view>
					<view class="money"><span style="font-size: 22rpx;">￥</span>{{item.market_price}}</view>
					<view class="num_addcar">
						<view class="num">已销售{{item.sales}}</view>
						<view class="go-shop-car"
							@click.stop="open_specification(item.id)"
							:ref="'button-r' + item">
							+
						</view>
					</view>
				</navigator>
			</block>
		</view>
		<sizepop ref='specification'></sizepop>
	</view>
</template>

<script>
	import sizepop from '@/componets/specification-pop/specification-pop.vue'
	import { http } from 'uview-plus'
	export default {
		components: {
			sizepop
		},
		data() {
			return {
				current: 0,
				keyword: '',
				swpierList: [],
				gridList: [],
				productList: []
			};
		},
		async onShow(){
			this.swpierList = await http.get('/shop/banner',{header:{'Content-Type':'multipart/form-data'}});
			this.gridList = await http.get('/shop/goods/category/home',{header:{'Content-Type':'application/json'}})
			this.areaList = await http.get('/shop/chip/area',{header:{'Content-Type':'multipart/form-data'}})
			await http.get('/shop/goods',{header:{'Content-Type':'multipart/form-data'}}).then(res => {
					this.productList = res.data
			});
			
		},
		methods: {
			async getBanner(){
				
			},
			open_specification(e){
				var that =this
				console.log(that.$refs.specification)
				that.$refs.specification.setup(e);
			},
			goClass(e){
				uni.switchTab({
					url:'/pages/product_List/product_List'
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #F3F4F6;
	}

	.container {
		height: 416rpx;
		background: linear-gradient(180deg, #0B9EE2 0%, rgba(201, 238, 255, 0) 100%);

		.logo-box {
			display: flex;
			align-items: center;

			.logo {
				width: 42rpx;
				height: 38rpx;
				margin-right: 6rpx;
			}

			.logotitle {
				color: $uni-text-color-inverse;
				font-family: Source Han Sans;
				font-size: 36rpx;
				letter-spacing: 1.5rpx;
				margin-left: 14rpx
			}
		}

		.search-box {
			padding-left: 8rpx;
			padding-right: 8rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.search {
				width: 630rpx;
				height: 60rpx;
				border-radius: 200px;
				display: flex;
				align-items: center;
				background: $uni-bg-color;

				.searchBtn {
					width: 104rpx;
					height: 38rpx;
					border-left: 2rpx solid #979797;
					font-size: 24rpx;
					text-align: center;
					line-height: 38rpx;
					color: #979797
				}
			}
		}

		.swiper-box {
			width: 718rpx;
			height: 266rpx;
			border-radius: 8rpx;
			margin: 20rpx auto 0rpx auto;

			.indicator {
				@include flex(row);
				justify-content: center;

				.indicator__dot {
					height: 6rpx;
					width: 24rpx;
					background: #FFFFFF;
					margin: 0 8rpx;
					transition: background-color 0.3s;
				}

				.indicator__active {
					@extend .indicator__dot;
					background: #869095;
				}
			}
		}

		.grid-box {
			width: 718rpx;
			height: 320rpx;
			border-radius: 20rpx;
			margin: 0rpx auto 20rpx auto;
			background: $uni-bg-color;

			.grid-img {
				width: 104rpx;
				height: 90rpx;
				border-radius: 26rpx;
				margin-top: 20rpx;
				margin-bottom: 4rpx;
			}

			.grid-text {
				font-family: 思源黑体;
				font-size: 24rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;

				font-feature-settings: "kern" on;
				color: #3D3D3D;
			}
		}

		.hot-sell-box {
			$bgPreUrl: "/static/index4_";
			width: 718rpx;
			// height: 368rpx;
			height: auto;
			overflow: hidden;
			border-radius: 20rpx;
			background: $uni-bg-color;
			margin: 0rpx auto 20rpx auto;
			text-align: center;
			padding: 0rpx 26rpx;
			box-sizing: border-box;

			@for $i from 1 through 4 {
				.sell-item-#{$i} {
					// background-image: url(#{$bgPreUrl}#{$i}.png);
					// background-position: center;
					// background-size: cover;
					width: 322rpx;
					height: 138rpx;
					border-radius: 12rpx;
					float: left;
					margin-top: 30rpx;
					padding: 12rpx 10rpx;
					box-sizing: border-box;
					display: flex;

					@if $i % 2==0 {
						margin-right: 0;
					}

					@else {
						margin-right: 20rpx;
					}

				}
			}

			.left {
				width: 114rpx;
				height: 114rpx;
				border-radius: 12rpx;
				background: $uni-bg-color;

				.img {
					@extend .left
				}
			}

			.right {
				font-family: 思源黑体;
				font-size: 24rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;
				font-feature-settings: "kern" on;
				color: #000000;
				margin-left: 46rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.sell-buy {
					width: 106rpx;
					height: 30rpx;
					border-radius: 200rpx;
					font-size: 20rpx;
					opacity: 1;
					background: #242424;
					color: #fff;
				}

			}

		}
		.product-box{
			width: 718rpx;
			margin: 0rpx auto 20rpx auto;
			.item{
				float: left;
				width: 350rpx;
				height: 486rpx;
				border-radius: 20rpx;
				margin-right: 14rpx;
				opacity: 1;
				background: #FFFFFF;
				margin-bottom: 22rpx;
				overflow: hidden;
				.product-img{
					display: block;
					width: 280rpx;
					height: 280rpx;
					margin: 22rpx auto;
				}
				.name{
					padding: 0 10rpx;
					box-sizing: border-box;
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: normal;
					color: #333333;
				}
				.money{
					padding: 0 10rpx;
					box-sizing: border-box;
					color: #F03717;
					font-size: 36rpx;
					margin-top: 10rpx;
				}
				.num_addcar{
					@include flex(row);
					justify-content: space-between;
					align-items: center;
					padding: 0 10rpx;
					box-sizing: border-box;
					.num{
						font-family: 思源黑体;
						font-size: 24rpx;
						font-weight: normal;
						text-align: center;
						color: #CCCCCC;
					}
					.go-shop-car {
						border-radius: 50%;
						opacity: 1;
						background: #F03717;
						text-align: center;
						color: #FFFFFF;
						width: 44rpx;
						height: 44rpx;
						@include flex(row);
						justify-content: center;
						align-items: center;
					}
				}
			}
			.item:nth-child(2n){
				margin-right: 0;
			}
		}
	}
</style>